<template>
  <div>
    <van-search
      ref="search"
      v-model="searchValue"
      shape="round"
      background="#007bff"
      placeholder="请输入搜索关键词"
      @input="inputChange"
    />
    <!-- 搜索历史 -->
    <div v-if="showHistory">
      <p class="title">
        <span>最近搜索:</span>
        <van-icon
        name="delete-o"
        style="float:right"
        @click="del"
        />
      </p>
      <van-button
        class="btn"
        round
        type="default"
        v-for="(item,i) in keywords"
        :key="'item'+i"
        size="small"
        @click="keyWord(item)"
      >
      {{item}}
      </van-button>
    </div>
    <!-- 联想关键字列表 -->
    <van-list v-else>
      <van-cell
        v-for="(item,index) in optionList"
        :key="index"
        icon="search"
      >
        <div @click="keyWord(item)" v-html="item"></div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
// 引入封装好的 高亮关键词方法 数组去重方法
import { heightLight, unique } from '@/utils'
// 导入lodash使用
import _ from 'lodash'
import { suggestionApi } from '@/api'
import { setToken, getToken } from '@/utils/ls'

export default {
  name: 'search-index',
  data () {
    return {
      // 搜索框双向绑定的数据
      searchValue: '',
      // 关键字列表
      optionList: '',
      // 搜索结果
      articlesList: [],
      // 关键词搜索历史
      keywords: JSON.parse(getToken('keywords')) || [],
      showHistory: true
    }
  },
  watch: {
    keywords: {
      handler (item1) {
        // console.log(item1)
        // 搜索历史为空不显示
        item1.length === 0 ? this.showHistory = false : this.showHistory = true
        // console.log(this.showHistory)
      },
      immediate: true // watch侦听操作内的函数会立刻被执行
    }
  },
  mounted () {
    this.focus()
  },
  activated () {
    this.focus()
  },
  methods: {
    // 搜索框自动聚焦
    focus () {
      this.$nextTick(() => {
        // console.log(this.$refs.search)
        this.$refs.search.querySelector('input').focus()
      })
    },
    // 删除搜索历史
    del () {
      this.keywords = []
      // 存本地
      setToken('keywords', JSON.stringify(this.keywords))
    },
    // 点击关键字
    async keyWord (item) {
      // console.log(item)
      // 去除html 标签 传给搜索结果 用来调接口
      const option = item.replace(/<[^>]+>/g, '')
      // console.log(option)
      // 搜索历史 保存在本地
      this.keywords.push(option)
      // 去重
      const newList = unique(this.keywords)
      this.keywords = newList
      // 存本地
      setToken('keywords', JSON.stringify(newList))
      // 清空表单
      this.searchValue = ''
      // 跳转路由页面
      this.$router.push({
        path: '/searchResult',
        query: {
          option: option
        }
      })
    },
    // 定义一个防抖的函数进行请求接口
    onSearch: _.debounce(async function () {
      // 请求接口
      if (this.searchValue === '') {
        // 如果搜索框内容为空 直接隐藏关键词列表
        this.optionList = ''
      } else {
      // 根据关键词展开列表
        const { data } = await suggestionApi({ q: this.searchValue })
        // 遍历数据 处理关键词高亮
        if (data.options[0] === null || data.options.length === 0) {
          this.$toast('无搜索结果')
        } else {
          const list = data.options.map(item => {
            return heightLight(item, this.searchValue)
          })
          // console.log(list)
          this.showHistory = false
          this.optionList = list
        }
      }
    }, 500),
    // 搜索框输入变化
    inputChange () {
      this.optionList = ''
      // 调用防抖搜素函数
      this.onSearch()
    }
  }
}
</script>

<style>
.title {
  padding: 0 20px;
  font-size: 14px;
}
.btn {
  margin:10px 0 0 20px !important;
  background-color: #eee !important;
}
</style>
